<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>Mqtt</h1>
    <div id="serverInfo"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var client = new Paho.MQTT.Client("127.0.0.1", Number(61623), "helloMqtt");
        client.onMessageArrived = onMessageArrived;
        client.onConnectionLost = onConnectionLost;
        client.onMessageDelivered = onMessageDelivered;
        console.log(client);
        client.connect({
            onSuccess:onConnect,
            userName:"admin",
            password:"password",
        });
        function onConnect() {
            console.log(client.isConnected());
            client.subscribe("World");
//            message = new Paho.MQTT.Message("Hello");
//            message.destinationName = "World";
//            client.send(message);
        }
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("onConnectionLost:"+responseObject.errorMessage);
            }
        }

        //接受服务器推送信息时候的数据信息发生的事件
        function onMessageArrived(message) {
            console.log("onMessageArrived:"+message.payloadString);
            $("#serverInfo").html(message.payloadString);
        }

        //单发送信息结束以后发生的时间
        function onMessageDelivered(message) {
            console.log("onMessageDelivered")
        }
    </script>
</body>


</html>